<template>
    <div class="Fault">
        <p class="Fault_P">故障明细</p>
        <div class="Fault_main">
            <table class="custom-table">
                <thead>
                    <tr>
                        <th>采集时间</th>
                        <th>设备名称</th>
                        <th>设备公司</th>
                        <th>城市</th>
                        <th>采集点</th>
                        <th>状态标识</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item, index) in tableData" :key="index">
                        <td>{{ item.collectionTime }}</td>
                        <td>{{ item.deviceName }}</td>
                        <td>{{ item.company }}</td>
                        <td>{{ item.city }}</td>
                        <td>{{ item.collectionPoint }}</td>
                        <td>{{ item.status }}</td>
                    </tr>
                </tbody>
            </table>

        </div>
    </div>
</template>

<script setup>

const tableData = [
    {
        collectionTime: '2021-05-01',
        deviceName: 'weifang-c-16',
        company: '西某',
        city: '潍坊市',
        collectionPoint: 'c4-10',
        status: '故障',
    },
    {
        collectionTime: '2021-05-01',
        deviceName: 'weifang-c-17',
        company: '某光',
        city: '潍坊市',
        collectionPoint: 'c4-11',
        status: '故障',
    },
    {
        collectionTime: '2021-05-01',
        deviceName: 'weifang-c-29',
        company: '某时',
        city: '潍坊市',
        collectionPoint: 'c4-6',
        status: '故障',
    },
    {
        collectionTime: '2021-05-01',
        deviceName: 'weifang-c-38',
        company: '某时',
        city: '潍坊市',
        collectionPoint: 'c4-6',
        status: '故障',
    },
    {
        collectionTime: '2021-05-01',
        deviceName: 'linyi-d-16',
        company: '西某',
        city: '临沂市',
        collectionPoint: 'd3-1',
        status: '故障',
    },
]

</script>

<style lang="scss" scoped>
.Fault {
    width: 690px;
    height: 200px;
    position: fixed;
    top: 500px;
    left: 422px;
    background: url(/src/assets/Frame_Bottom.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;

    .Fault_P {
        width: 100%;
        height: 20px;
        text-align: center;
        line-height: 20px;
        font-size: 15px;
    }

    .Fault_main {
        width: 100%;
        height: 100%;

        .custom-table {
            width: 100%;
            height: 100%;
            border-collapse: collapse;
            // margin: 20px 0;
            font-size: 16px;
            text-align: left;
            background-color: #0b1e3d;
            /* 深色背景 */
            color: #fff;
            /* 白色字体 */
        }

        .custom-table th,
        .custom-table td {
            padding: 12px 15px;
        }

        .custom-table th {
            background-color: #123456;
            /* 标题背景色 */
        }

        .custom-table tr:nth-child(even) {
            background-color: #1a1a1a;
            /* 偶数行背景色 */
        }

        .custom-table tr:nth-child(odd) {
            background-color: #0b1e3d;
            /* 奇数行背景色 */
        }
    }
}
</style>